<template>
	<view class="work-status-wrap">
		<!-- #ifdef APP-PLUS -->
			<uni-nav-bar
				class="uni-nav-bar-wrap" 
				status-bar 
				fixed
				:color="color"
				:border="false"
				:status-bar="true"
				:left-icon="leftIcon"
				:right-icon="rightIcon"
				:backgroundColor="backgroundColor"
				:backgroundImage="backgroundImage"
				:title="title | titleHanlder"
				@clickLeft="clickLeft"
				@clickRight="clickRight"
				>
			</uni-nav-bar>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniNavBar from '../../uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {uniNavBar},
		props: {
			title: {
				type: String,
				default: '福州大学'
			},
			leftIcon: {
				type: String,
				default: 'bars'
			},
			rightIcon: {
				type: String,
				default: 'plus'
			},
			color: {
				type: String,
				default: '#fff'
			},
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			backgroundImage: {
				type: String,
				default: ''
			}
		},
		filters: {
			titleHanlder(str) {
				return str.length > 11 ? str.trim().substr(0, 11) + '...' : str.trim()
			}
		},
		methods: {
			clickLeft() {
				this.$emit('clickLeft')
			},
			clickRight() {
				this.$emit('clickRight')
			}
		}
	}
</script>

<style scoped lang="scss">
	.work-status-wrap {
		width: 100%;
		& /deep/ .uni-navbar__header-container {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>
